import { Button, Drawer, Space } from 'antd';
import { useEffect, useState } from 'react';
import { Condition } from '@/component/conditions/interface';
import Rules from '@/component/rules';
import { Rule } from '@/component/rules/interface';
import { history } from 'umi';
import { useModel } from '@@/plugin-model/useModel';

export default function Page() {
  const [visible, setVisible] = useState<boolean>(false);
  const [ruleList, setRuleList] = useState<Rule[]>([]);
  // const {setInitialState} = useModel('@@initialState');
  //
  // useEffect(() => {
  //   setInitialState({
  //     collapsed: true
  //   });
  // }, []);

  function showModal(isVisible: boolean) {
    setVisible(isVisible);
  }

  function handleOk(data: Condition) {
    showModal(false);
  }

  function addRule() {
    ruleList.push({});
    setRuleList([...ruleList]);
  }

  function delRule(index: number) {
    ruleList.splice(index, 1);
    setRuleList([...ruleList]);
  }

  function go() {
    history.push('/condition');
  }

  return (
    <>
      <Button onClick={() => showModal(true)}>添加规则</Button>
      <Button onClick={go}>去condition</Button>

      <Drawer
        title="规则配置"
        width={600}
        placement="right"
        onClose={() => showModal(false)}
        visible={visible}
        maskClosable={false}
        destroyOnClose={true}
        extra={
          <Space>
            <Button onClick={() => showModal(false)} type="primary">
              Submit
            </Button>
          </Space>
        }
      >
        {ruleList.map((item, index) => (
          <Rules
            key={index}
            value={item}
            index={index}
            delRule={() => delRule(index)}
          />
        ))}
        <Button onClick={addRule}>添加规则</Button>
      </Drawer>
    </>
  );
}
